/**
 * 入参
 *
 */
import React, { PureComponent } from 'react';
import { FirstHeaderC, NoDataMaskC } from '../../../../comps';
import PropTypes from 'prop-types';
import { Spin } from 'antd';
import myStyles from './index.less';
import { connect } from 'dva';

class BaseInfoC extends PureComponent {
  static defaultProps = {
    width: '100%',
  };
  state = {
    dataSource: {}, //表格信息
    tradingcode: '',
    exchangecode: '',
    masking: true, //蒙版
  };
  componentDidMount() {
    const { tradingcode, exchangecode } = this.props;
    if (tradingcode && exchangecode) {
      this.getData(this.props);
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.tradingcode !== nextProps.tradingcode || this.props.exchangecode !== nextProps.exchangecode || this.props.timeStamp !== nextProps.timeStamp) {
      if (nextProps && nextProps.tradingcode && nextProps.exchangecode) {
        this.getData(nextProps);
      } else {
        this.setState({
          masking: true,
          dataSource: {},
        });
      }
    }
  }

  getData = (datas) => {
    const { dispatch } = this.props;
    const { tradingcode, exchangecode } = datas;
    this.setState({
      masking: false,
    });
    dispatch({
      type: 'etfOrderM/getBaseInfo',
      payload: {
        tradingcode: tradingcode,
        exchangecode: exchangecode,
        maatApi: this.props.maatApi,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            dataSource: data,
          });
        }
      },
    });
  };

  render() {
    const { width, loading, type } = this.props;
    const { dataSource, masking } = this.state;
    return (
      <div style={{ width }}>
        <div>
          <FirstHeaderC title={type == 2 ? '场内（ETF）基金基本信息' : '基金基本信息'} />
        </div>
        <Spin spinning={loading.effects['etfOrderM/getBaseInfo'] == true}>
          <div style={{ position: 'relative' }}>
            <div className={myStyles.accountNumber}>
              <div>
                <span className={myStyles.leftBox}>证券名称</span>
                <span className={myStyles.rightBox} title={dataSource.chinameabbr}>
                  {dataSource.chinameabbr ? dataSource.chinameabbr : '--'}
                </span>
              </div>
              <div>
                <span className={myStyles.leftBox}>交易市场</span>
                <span className={myStyles.rightBox} title={dataSource.exchangename}>
                  {dataSource.exchangename ? dataSource.exchangename : '--'}
                </span>
              </div>
              <div>
                <span className={myStyles.leftBox}>基金管理人</span>
                <span className={myStyles.rightBox} title={dataSource.managementcom}>
                  {dataSource.managementcom ? dataSource.managementcom : '--'}
                </span>
              </div>
              <div>
                <span className={myStyles.leftBox}>基金托管人</span>
                <span className={myStyles.rightBox} title={dataSource.custodian}>
                  {dataSource.custodian ? dataSource.custodian : '--'}
                </span>
              </div>
              <div>
                <span className={myStyles.leftBox}>基金属性</span>
                <span className={myStyles.rightBox} title={dataSource.fundnatureName}>
                  {dataSource.fundnatureName ? dataSource.fundnatureName : '--'}
                </span>
              </div>
              <div>
                <span className={myStyles.leftBox}>发行日期</span>
                <span className={myStyles.rightBox} title={dataSource.issueDate}>
                  {dataSource.issueDate ? dataSource.issueDate : '--'}
                </span>
              </div>
              <div>
                <span className={myStyles.leftBox}>资产规模</span>
                <span className={myStyles.rightBox} title={dataSource.assetSize}>
                  {dataSource.assetSize ? dataSource.assetSize + '亿元' : dataSource.assetSize == 0 ? '0元' : '--'}
                </span>
              </div>
              <div>
                <span className={myStyles.leftBox}>份额规模</span>
                <span className={myStyles.rightBox} title={dataSource.shareSize}>
                  {dataSource.shareSize ? dataSource.shareSize + '亿份' : dataSource.assetSize == 0 ? '0份' : '--'}
                </span>
              </div>
              <div>
                <span className={myStyles.leftBox}>成立以来分红</span>
                <span className={myStyles.rightBox} title={dataSource.accumulatedDividends}>
                  {dataSource.accumulatedDividends ? dataSource.accumulatedDividends : '--'}
                </span>
              </div>
            </div>
            {masking ? <NoDataMaskC height={'280px'} title={'请选择证券代码，加载数据！'} /> : null}
          </div>
        </Spin>
      </div>
    );
  }
}

// props默认值
BaseInfoC.propsTypes = {
  tradingcode: PropTypes.number | PropTypes.string, // 证券代码
  exchangecode: PropTypes.number | PropTypes.string, // 交易所代码
  width: PropTypes.string, // 组件宽
  timeStamp: PropTypes.number | PropTypes.string, // 时间戳
};

export default connect(({ etfOrderM, loading }) => ({
  etfOrderM,
  loading,
}))(BaseInfoC);
